<template>
    <el-card class="blog-list-item" shadow="hover" @click.native="toDetail">
        <div class="header">
            <el-avatar icon="el-icon-user-solid" size="small" :src="blog.avatar"></el-avatar>
            <span class="author">{{ blog.username }}</span>

        </div>
        <div class="content">
            <div class="title">{{ blog.title }}</div>
        </div>
        <div class="footer clearfix">
            <div class="tag">
                <strong>{{ blog.typeName }}</strong>
            </div>
            <div class="right">
                <span class="time">创建时间：{{ blog.createTime }} </span>
                <span>
                    <svg t="1683358219813" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4543" width="32" height="32">
                        <path
                            d="M512 416a96 96 0 1 1-96 96 96 96 0 0 1 96-96m0-64a160 160 0 1 0 160 160 160 160 0 0 0-160-160z"
                            fill="#959595" p-id="4544"></path>
                        <path
                            d="M512 298.88c188.64 0 288 113.92 366.72 213.12C800 611.36 700.64 725.12 512 725.12S224 611.36 145.28 512C224 412.64 323.36 298.88 512 298.88m0-64C264.64 234.88 147.52 406.56 64 512c83.52 105.44 200.64 277.12 448 277.12S876.48 617.44 960 512c-83.52-105.44-200.64-277.12-448-277.12z"
                            fill="#959595" p-id="4545"></path>
                    </svg>
                </span>
                <span> {{ blog.viewCount }}</span>
            </div>
        </div>
    </el-card>
</template>
 
<script>
export default {
    name: 'BlogListItem',
    props: [
        'blog'
    ],
    data() {
        return {

        }
    },
    methods: {
        toDetail() {
            // this.$router.push({
            //     name: 'blog',
            //     params: {
            //         bid: this.blog.bid
            //     }
            // })
            this.$router.push({path: '/blog/'+this.blog.bid})
        },
    }
}
</script>
 
<style lang="less" scoped>
.el-card {
    padding: 20px 20px 10px 20px;
    margin-bottom: 20px;
    width: 800px;
    display: flex;
    justify-content: space-between;

    /deep/ .el-card__body {
        width: 800px;
        // padding-bottom: 0;
        padding: 20px 20px 0 20px;
    }

    .header {
        display: flex;
        align-items: center;
        width: 100%;

        .author {
            color: #323232;
            margin-left: 5px;
        }
    }

    .content {
        padding: 20px 0 15px;
        width: 100%;

        .title {
            font-size: 18px;
            font-weight: 700;
        }
    }

    .footer {
        display: flex;
        justify-content: space-between;

        .tag {
            background: #F0F0F0;
            color: #323232;
            border-radius: 15px;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            margin-bottom: 10px;
            display: inline-block;
            margin-left: -2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            strong {
                // font-weight: 400;
                font-size: 12px;
            }
        }

        .right {
            display: flex;
            align-items: center;

            span {
                color: #959595 !important;
            }

            .time {
                margin-right: 10px;
            }
        }
    }


}
</style>